<template>
  <div class="home-wrapper">
    <!--<h2>Welcome to Jobslink</h2>-->
    <el-card style="margin: 20px 20px; font-size: 14px">
      <!--<div slot="header">-->
        <!--<span>讲解视频：</span>-->
        <!--<a href="https://www.bilibili.com/video/BV16N4y1d7MM/"-->
           <!--target="_blank">https://www.bilibili.com/video/BV16N4y1d7MM/</a>-->
      <!--</div>-->
      <div class="first">
        <img alt=""
             :src="avatar"
             style="width: 50px;
             height: 50px;
             float:left;
             margin-right:10px;
             margin-top:15px;
             border-radius:50%;" />
        <p style="font-size:16px;margin-bottom:8px">{{name}}，{{hello}}</p>
        <p style="font-size:12px;color:rgb(185, 181, 189)">Today：{{nowTime}}</p>
      </div>
      <div class="first">
        <ul>
          <li class="li" style="width: 33%">客户数
          </li>
          <li class="li" style="width: 33%">邮件数
          </li>
          <li class="li" style="width: 33%">
            简历数
            <!--<el-popover class="ml5" content="功能暂未开发" placement="top" trigger="hover">-->
              <!--<i class="el-icon-warning-outline" slot="reference"></i></el-popover>-->
          </li>
        </ul>
        <ul>
          <li class="da" style="width: 33%">
            {{ cssData.clientCount }}
            <!--<router-link to="/member/member">{{ cssData.clientCount }}</router-link>-->
          </li>
          <li class="da" style="width: 33%">
            {{cssData.mailCount}}
          </li>
          <li class="da" style="width: 33%">
            {{cssData.candCount}}
          </li>
        </ul>
      </div>
    </el-card>
  </div>
</template>

<script>
  import { ccsCount } from "@/api/system/statistics";

  import { mapGetters } from 'vuex'

  export default {
    name: "Index",
    data() {
      return {
        cssData: {
          clientCount: 0,
          candCount: 0,
          mailCount: 0
        },
        hello: '',
        nowTime: '',
        // 版本号
        version: "3.8.6"
      };
    },
    created() {
      this.showTimes()
      this.helloTimes()
      this.initData();
    },
    computed: {
      ...mapGetters(['avatar', 'name'])
    },
    mounted() {
      // 禁用复制
      // this.$nextTick(() => {
      //   document.onselectstart = new Function("event.returnValue=false");
      // })
    },
    methods: {
      initData(){
        ccsCount().then(response => {
          console.log(response);
          this.cssData = response.data;
        }).catch(err => {
        }).finally(f => {
        });
      },
      showTimes() {
        this.timeFormate(new Date())
      },
      timeFormate(timeStamp) {
        let year = new Date(timeStamp).getFullYear()
        let month =
          new Date(timeStamp).getMonth() + 1 < 10
            ? '0' + (new Date(timeStamp).getMonth() + 1)
            : new Date(timeStamp).getMonth() + 1
        let date =
          new Date(timeStamp).getDate() < 10
            ? '0' + new Date(timeStamp).getDate()
            : new Date(timeStamp).getDate()
        let hh =
          new Date(timeStamp).getHours() < 10
            ? '0' + new Date(timeStamp).getHours()
            : new Date(timeStamp).getHours()
        let mm =
          new Date(timeStamp).getMinutes() < 10
            ? '0' + new Date(timeStamp).getMinutes()
            : new Date(timeStamp).getMinutes()
        let ss =
          new Date(timeStamp).getSeconds() < 10
            ? '0' + new Date(timeStamp).getSeconds()
            : new Date(timeStamp).getSeconds()
        let week = new Date(timeStamp).getDay()
        let weeks = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
        // let getWeek = '星期' + weeks[week]
        let getWeek = weeks[week]
        this.nowTime =
          year +
          '/' +
          month +
          '/' +
          date +
          '/' +
          ' ' +

          getWeek
      },
      helloTimes() {
        const currentDate = new Date();
        const hh = currentDate.getHours();
        if (0 < parseInt(hh) && parseInt(hh) < 12) {
          this.hello = 'Good morning'
        } else if (parseInt(hh) < 18) {
          this.hello = 'Good afternoon'
        } else {
          this.hello = 'Good evening'
        }
      },
      goTarget(href) {
        window.open(href, "_blank");
      }
    }
  };
</script>

<style scoped lang="scss">
  .home-wrapper

  .li {
    float: left;
    width: 25%;
    font-size: 12px;
    color: rgb(185, 181, 189);
  }

  .da {
    float: left;
    width: 25%;
    font-size: 20px;
  }

  .first {
    float: left;
    width: 50%;
    margin-bottom: 20px;
  }

  .el-table .warning-row {
    background: rgb(39, 138, 230);
  }
</style>

